<template>
  <div>
    <nav_bar title='钢筋识别' background='#fff'  :home="true" @back="handlerGobackClick" @home="handlerGohomeClick"></nav_bar>
    <!-- 头部 -->
      <div class="header">
        <div class="header-desc">
          <div class="item_name">{{plate_num}}</div>
          <div class="item_content">
            <span >已识别捆数&nbsp;{{projectInfo.completed_num||0}}</span>
            <span>现场进度&nbsp;{{projectInfo.receipt_schedule}}</span>
            <template v-if="projectInfo.point_item">
              <form name='pushMsgFm' report-submit @submit="finishRecord"  class="form" v-if="projectInfo.point_item.status==1">   
                <button form-type="submit">
                    完成收货
                </button>  
            </form>
            <div class="form" v-if="projectFinish">
              <img class="gou" src="../../../static/images/icon/countsteel_gou.png" alt="" >
            </div>
            </template>
            
          </div>
          <div class="item_date">{{projectInfo.created_at||''}}</div>
        </div>
        
      </div>
      <!-- 头部end -->

      <!-- 列表 -->
    <div class="newProject">
      <van-tabs color="#f28b00" :animated="false"   tab-class="projectTab" tab-active-class="projectTabActive" @change="tabChange">
        <van-tab :title="item.name" v-for="(item,index) of tabOptions" :key="index" :name="item.id"></van-tab>
      </van-tabs>

      <!-- 钢筋识别 -->
      <div class="itemList" v-show="tabActivieItem==1">
          
          
        <scroll-view class="logoList" scroll-y="true" >
          <div>
            <!-- <div class="upLoadImg" style="height:auto">
              上传图片
               <span>(点击查看大图,长按涂鸦)</span>
            </div> -->
          <div v-if="logoImg.length>0">
            <div v-for="(item,index) of logoImg" :key="index" class="logoImg_item_wrapper">
              <van-swipe-cell :right-width="60" :left-width="0" disabledLeft>
                <van-cell-group> 
                    <div class="logoImg_item">
                      <div class="img_wrapper">
                        <img 
                        v-if="item.img_url_paint"
                        :src="item.img_thumb_paint||item.img_url_paint" alt=""
                        mode="aspectFill"
                        class="splitImg"
                        @load="imgLoaded"
                        @click="prevImg(item.img_url_paint||item.img_thumb_paint)"
                      >
                      <img
                        v-else
                        :src="item.img_thumb_url||item.img_url" alt=""
                        mode="aspectFill"
                        class="splitImg"
                        @load="imgLoaded"
                        @click="prevImg(item.img_url||item.img_thumb_url)"
                      >

                      <div class="img_layer" v-show="item.is_result!==1&&item.is_appeal!=1">识别中</div>
                      <div class="img_layer" v-show="item.is_appeal==1">申诉中</div>
                      </div>
                      <div class="logoImg_desc">
                        <div class="logoImg_desc_item logoImg_desc_item_count">
                          <span :class="{'label-appeal':item.is_appeal==2}">{{item.result_check_num}}</span>
                        </div>
                        <div class="logoImg_desc_item">
                          <span class="label" >出厂数量</span>
                          <span >{{item.result_factory_count}}</span>
                        </div>
                        <div class="logoImg_desc_item">
                          <span class="label">异常数量</span>
                          <span>{{item.result_abnormal}}</span>
                        </div>
                      </div>
                      <div class="btn_list" v-if="!projectFinish">
                        <img src="../../../static/images/icon/edit.png" alt="" class="editorBtn" @click="reEditor($event,index)">
                        <img src="../../../static/images/icon/false.png" alt="" class="falseBtn" @click="resetResult(item)" v-show="item.is_appeal==0">
                      </div>
                    </div>
                </van-cell-group>
                <div slot="right" class="slot-right"><div @click="delPic(item,index)" class="slot-right-btn">删除</div></div>
              </van-swipe-cell>
            </div>
          </div>
          </div>
        </scroll-view>
      </div>
      <!-- 钢筋识别end -->
      
      <!-- 现场进度 -->
      <scroll-view v-show="tabActivieItem==2" class="record_wrapper" scroll-y="true">
        <record  :project_id="project_id" :status="projectFinish" :item_id="item_id" ref="record" @upDataHeaderMsg="getPointItemDetail"></record>
      </scroll-view>
      <!-- 现场进度end -->

      <scroll-view v-show="tabActivieItem==3" class="statistics_wrapper" scroll-y="true">
        <statistics  :project_id="project_id" :item_id="item_id" ref="statistics"></statistics>
      </scroll-view>
      
    </div>

    <div class="btn" v-if="tabActivieItem==1&& !projectFinish">
          <form name='pushMsgFm' report-submit @submit="showPopup($event,true)" class="btn_commit"  >   
              <button form-type="submit" class="btn_commit" >
                  <img src="../../../static/images/icon/camera.png" alt="">
              </button>  
          </form>
        </div>
    <!-- 信息填写框 -->
    <van-popup
            :show="showPopupFlag"
            position="center"
            :overlay="true"
            @close="closePopup"
          >
          <div v-if="showPopupFlag">
            <scroll-view class="popup_content"  scroll-y="true" @scroll="popup_scroll"  >
              <!-- 品牌 -->
              <select_self   :mustFlag="true" :searchFlag="true" :prop-array="brandArr" :arrTag="'品牌'" :nowText="nowText.steelBrand" @getItem="getPicDesc($event,'brand')"></select_self>
              <!-- 规格 -->
              <select_self   :mustFlag="true" :prop-array="steelSizeArr" :arrTag="'规格'" :nowText="nowText.steelSize" @getItem="getPicDesc($event,'size')"></select_self>
              
              <!-- 捆数 -->
              <div class="PicDesc_item " v-if="selectPicIndex===''"><span  class="PicDesc_item_label">捆数</span><input type="number" @input="getChanNum" placeholder="填写捆数" v-model="nowText.bundleNum"></div>
              <div class="PicDesc_item " v-else><span  class="PicDesc_item_label">捆数</span><input type="number" @input="getChanNum" placeholder="填写捆数" v-model="logoImg[selectPicIndex].bundleNum"></div>
            
              <!-- 出厂支数 -->
              <div class="PicDesc_item borderB" v-if="selectPicIndex===''"><span  class="PicDesc_item_label">出厂</span><input type="number" placeholder="填写出厂支数" v-model="nowText.steelNum"></div>
              <div class="PicDesc_item borderB" v-else><span  class="PicDesc_item_label">出厂</span><input type="number" placeholder="填写出厂支数" v-model="logoImg[selectPicIndex].steelNum"></div>

              <!-- 品名 -->
              <select_self   :prop-array="brandNameArr" :arrTag="'品名'" :nowText="nowText.brandName" @getItem="getPicDesc($event,'brandName')"></select_self>
              <!-- 型号 -->
              <select_self   :prop-array="brandModelArr" :arrTag="'材质'" :nowText="nowText.brandModel" @getItem="getPicDesc($event,'model')"></select_self>
              <!-- 长度 -->
              <select_self   :prop-array="brandLengthArr" :arrTag="'长度'" :nowText="nowText.brandLength" @getItem="getPicDesc($event,'length')"></select_self>
            </scroll-view>
            <div class="upLoad_pic" @click="uploadImg" v-if="selectPicIndex===''">
              <img src="../../../static/images/icon/camera.png" alt="">
            </div>
            <div class="upLoad_pic" @click="returnEditor" v-else>
              <span>保存</span>
            </div>
          </div>
            
          </van-popup>
          <!-- 图片信息填写框 end-->

  
  </div>
</template>
<script>
import upLoadImgMy from '@/components/uploadImg';
import record from '@/components/record';//现场进度
import statistics from '@/components/statistics';//统计
export default {
  data() {
    return {
      tabActivieItem:1,//选中的tab
      tabOptions:[{name:'钢筋识别',id:1},{name:'现场进度',id:2},{name:'统计',id:3}],
      projectInfo:'',//项目信息
      plateNumber:'',
      btnFlag:false,
      canvasWidth:'',//画布大小
      canvasHeight:'',
      initFlag:true,//从首页进入时候或者从草稿页进入时候，清除车辆图片的数据
      project_id:'',
      project_name:'',
      plate_num:'',//车牌号
      // original_pieces_num:'',//原计划条数
      selectType_input:'',
      logoImg:[],//钢材图片的数据,
      showEdiotrFlag:'',//编辑图片的弹窗
      selectPicIndex:'',//当前编辑图片的索引
      project:"",
      point_item:"",
      point_imgs:"",
      item_id:"",
      showPopupFlag:'',//显示添加图片的信息框
      newMsg:false,//是否有新数据
      pointItemImgId:'',
      picMessage:{
        steelBrand:'',//品牌
        brandName:'',//品牌子名字
        steelSize:'',//规格
        brandModel:'',//型号
        brandLength:'',//长度
        steelNum:'',
        bundleNum:1//捆数
      },
      picMessageId:{//选中各项的id
        steelBrandId:'',//品牌id
        brandNameId:'',//品牌子名字id
        steelSizeId:'',//规格id
        brandModelId:'',//型号id
        brandLengthId:'',//长度id
        steelNumId:'',
        bundleNumId:''
      },
      nowText:{
        //初始状态的选中项
        steelBrand:'请选择品牌',//品牌
        brandName:'请选择钢材类型',//品牌子名字
        steelSize:'请选择规格',//规格
        brandModel:'请选择型号',//型号
        brandLength:'请选择长度',//长度
        steelNum:'',
        bundleNum:1//捆数
      },
      brandArr:'',//品牌的初始数据
      brandNameArr:'',//牌名的初始数据
      steelSizeArr:'规格',//规格的初始数据
      brandModelArr:'型号',//型号的初始数据
      brandLengthArr:'长度',//长度的初始数据
      
      startGetnewsTimer:'',//轮询的对象
      editorFlag:'',//能否进行修改
      refreshFlag:true,//能进行刷新
      lastPageRoute:'',//上一页的route
      imgItem:''//每次上传的内容的全部数据
    }
  },
  components:{
    upLoadImgMy,
    record,
    statistics
  },
  watch:{
    logoImg(nval){
      console.log(nval,'logoImg')
    },
    "picMessageId.steelSizeId"(nval,val){
      if(this.selectPicIndex===''){
        this.getChanNum();
      }
      if(nval &&val){
        this.getChanNum();//获取出厂支数
      }
    },
    "picMessageId.steelBrandId"(nval,val){
      if(this.selectPicIndex===''){
        this.getChanNum();
      }
      if(nval &&val){
        this.getChanNum();//获取出厂支数
      }
    },
  },
  computed: {
    img_id(){
      //上传的图片信息
        let obj={};
        let imgItem=this.imgItem;
        obj.bundle_num=imgItem.bundleNum;//捆数
        obj.point_item_img_id=imgItem.point_item_img_id;
        obj.brand_id=imgItem.steelBrandId;
        obj.brand_name_id=imgItem.brandNameId;
        obj.format_id=imgItem.steelSizeId;
        obj.material_id=imgItem.brandModelId;
        obj.length_id=imgItem.brandLengthId;
        obj.factory_count=imgItem.steelNum;

        obj.graffiti_before_img_id=imgItem.id;//涂鸦前的照片

        obj.lat=imgItem.lat;
        obj.lng=imgItem.lng;

        obj.width=imgItem.width||'';//涂鸦合成的宽高
        obj.height=imgItem.height||'';
        if(imgItem.img_id_paint){
          //涂鸦后的照片
          obj.img_id=imgItem.img_id_paint;
        }else{
          obj.img_id=imgItem.id;
        }
        console.log(obj,'上传的图片信息')
      return obj
    },
    editorPic(){
      //编辑显示用的状态的图片地址
      if(typeof(this.selectPicIndex)=='number'){
        const index=this.selectPicIndex
        if(this.logoImg[index]){//避免只有一张图，删除了第一张就报错
          if(this.logoImg[index].img_url_paint){
            return this.logoImg[index].img_url_paint 
          }
          return this.logoImg[index].img_url
        }else{
          return ''
        }
        
      }else{
        return ''
      }
    },
    editorPicPrev(){
      //编辑预览用的图片
      if(typeof(this.selectPicIndex)=='number'){
        const index=this.selectPicIndex
        if(this.logoImg[index]){//避免只有一张图，删除了第一张就报错
          if(this.logoImg[index].img_url_paint){
            return this.logoImg[index].img_url_paint
          }
          return this.logoImg[index].img_url
        }else{
          return ''
        }
        
      }else{
        return ''
      }
    },
    projectFinish(){
      //区分项目是否已完成
      if(!this.projectInfo.point_item){ 
        return false
      }else{
        if(this.projectInfo.point_item.status==2){
          return true
        }else{
          return false
        }
      }
    }

  },
  methods: {
    tabChange(e){
      //切换tab
      this.tabActivieItem=e.target.name;
      this.updateTab()
    },
    updateTab(){
      //更新tab下对应的数据信息
      let index=this.tabActivieItem;
      switch (index){
        case 1:
          if(this.refreshFlag==false){
            this.$currency.showToast('图片信息上传中请稍等片刻再刷新');
            return
          }
          this.getPointItemByItemId();
          break;
        case 2:
          this.$refs.record.getPointItemRule();
          break;
        case 3:
          this.$refs.statistics.getPointImgList();
      }
    },
    async resetResult(item){
      //提交申诉图片
    let judge =await  this.$currency.showModal('识别结果有误，申请复查?','');
      if(judge){
        let userToken=wx.getStorageSync('userToken')
        let res=await this.$request.postData('/ucenter/submitPointItemAppeal',{
          point_item_img_id:item.point_item_img_id,
          user_token:userToken
        })
        if(res.data.level=='success'){
          this.$currency.showToast(res.data.message);
          setTimeout(()=>{
            this.getPointItemByItemId()
          },1500)
        }
      }
    },
    closeBtnFlag(){
      this.btnFlag=false
    },
    handlerGobackClick(){
      this.$bus.$data.noFirstLoadHome=true;
      if(this.lastPageRoute=='pages/steelList/main'){
          wx.navigateBack({
              delta: 1
            })
      }else{
        this.clearStartGetnewsTimer();
        wx.navigateTo({url:`/pages/steelList/main?id=${this.project_id}`})
        
      }
      
    },
    handlerGohomeClick(){
      this.$bus.$data.noFirstLoadHome=true;
      wx.switchTab({url:'/pages/home/main'})
    },
    imgLoaded(){
      wx.hideLoading()
    },
    async uploadImg(e){
      var lat='';
      var lng='';
      let that=this;
      if(e){
            if(that.picMessageId.steelBrandId==''){
              that.$currency.showToast('请选择品牌');
              return
            }
            if(that.picMessageId.steelSizeId==''){
              that.$currency.showToast('请选择规格');
              return;
            }
          }
      this.showPopupFlag=false;//隐藏规格弹窗
      wx.showLoading({title:'获取地理位置中',mask:true})
      wx.getLocation({
          type: 'wgs84',
          success:async function (res1) {
            
            lat=res1.latitude;
            lng=res1.longitude;
            
          that.refreshFlag=false;//避免上传数据途中更新数据
          let res=await that.$currency.upLoadImage(that);
          var index=''
          const data=JSON.parse(res.data)
          const img_url=data.data.img_url;
          const img_thumb_url=data.data.thumb_url;//缩略图
          const id=data.data.id
          
          wx.showLoading({
                title:'图片加载中',
                mask:true
              })
          if(!e){
            //替换

            const index=that.selectPicIndex;
            const item=that.logoImg[index];

            that.picMessage.steelBrand=item.steelBrand;
            that.picMessage.brandName=item.brandName;
            that.picMessage.steelSize=item.steelSize;
            that.picMessage.brandModel=item.brandModel;
            that.picMessage.brandLength=item.brandLength;
            that.picMessage.steelNum=item.steelNum;
            that.picMessageId.bundleNum=item.bundleNum;

            that.picMessageId.steelBrandId=item.steelBrandId;
            that.picMessageId.brandNameId=item.brandNameId;
            that.picMessageId.steelSizeId=item.steelSizeId;
            that.picMessageId.brandModelId=item.brandModelId;
            that.picMessageId.brandLengthId=item.brandLengthId;
            that.picMessageId.steelNumId=item.steelNumId;

            that.picMessageId.bundleNumId=item.bundleNumId;


            const imgItem={img_thumb_url,point_item_img_id:item.point_item_img_id,img_url,id,...that.picMessage,steelNum:item.steelNum,...that.picMessageId,lat:lat,lng:lng};
            imgItem.bundleNum=item.bundleNum
            that.imgItem=imgItem;//单张上传的内容
            that.logoImg.splice(index,1,imgItem);
          }else{
            const imgItem={img_thumb_url,point_item_img_id:'',img_url,id,...that.picMessage,steelNum:that.nowText.steelNum,...that.picMessageId,lat:lat,lng:lng};
            imgItem.bundleNum=that.nowText.bundleNum
            that.imgItem=imgItem;//单张上传的内容
            that.logoImg.unshift(imgItem);
          }


          //跳转涂鸦页面
          const answer=await  that.$currency.showModal('对图片进行涂鸦?','')
          // const answer=true;
          if(answer){
            that.$currency.showToast('跳转涂鸦页，请稍等')
          }
          setTimeout(()=>{
            if(answer && e){
              index=that.logoImg.length-1
              wx.reLaunch({url:`/pages/drawImg/main?imgUrl=${img_url}&imgIndex=${index}&imgId=${id}`})
            }else if(answer && !e){
              //重拍
              index=that.selectPicIndex;
              console.log('我重拍了')
              wx.reLaunch({url:`/pages/drawImg/main?imgUrl=${img_url}&imgIndex=${index}&imgId=${id}`})
            }
            
            if(answer==false){
              //马上识别
              that.uploadSteel()
            }
              
            that.closePopup();
            that.closePopup_editor();
            },2000)
          },
          fail:function(){
            // wx.hideLoading()
            if(e){
            if(that.picMessageId.steelBrandId==''){
              return
            }
            if(that.picMessageId.steelSizeId==''){
              return;
            }
          }
            // that.$currency.showToast('上传图片前，需获取当前位置')
            that.btnFlag=true
            that.$currency.showToast('获取地理位置失败,打开手机的GPS')
            
          },
          complete:function(){
            if(!that.btnFlag){
                wx.hideLoading()
              }
          }
        })
      

    },
    paintImg(item,index){
      //重拍
      if(item.is_appeal==2){
        this.$currency.showToast('该图片已申述，不能进行涂鸦')
        return
      }
      this.imgItem=item
        wx.reLaunch({url:`/pages/drawImg/main?imgUrl=${item.img_url}&imgIndex=${index}&imgId=${item.id}`})
        
    },
    prevImg(url){
      wx.previewImage({
          current: url, // 当前显示图片的http链接
          urls: [url] // 需要预览的图片http链接列表
        })
    },
    showPopup($event='',reNewSelectPicIndex){
      if($event){
        this.form_id=$event.target.formId;
      }
      
      if(reNewSelectPicIndex){
        this.selectPicIndex=''
      }
      this.showPopupFlag=true
    },
    closePopup(){
      this.showPopupFlag=false;
        
      this.nowText={...this.picMessage,steelNum:this.nowText.steelNum,bundleNum:this.nowText.bundleNum};//保存上次填写的信息
      this.picMessage.steelBrand?this.nowText.steelBrand=this.picMessage.steelBrand:this.nowText.steelBrand='请选择品牌';
      this.picMessage.steelSize?this.nowText.steelSize=this.picMessage.steelSize:this.nowText.steelSize='请选择规格';

      this.initArrayItem()
    },
    showPopup_editor(){
      this.showEdiotrFlag=true
    },
    closePopup_editor(){
      this.showEdiotrFlag=false
    },
    async delPic(item,index){
      //删除图片
      const state=await this.$currency.showModal('确认删除吗?','','')
      if(state){
        let userToken=wx.getStorageSync('userToken');
        
        this.closePopup_editor();
       let res=await  this.$request.postData('/ucenter/delPointItemImg',{
          point_item_id:this.item_id,
          point_item_img_id:item.point_item_img_id,
          user_token:userToken
        })
      this.logoImg.splice(index,1);
      }
    },
    reEditor($event,index){
      //编辑选中图片
      this.selectPicIndex=index;
      // const index=this.selectPicIndex;
      const item=this.logoImg[index];
      this.nowText={
        //初始状态的选中项
        steelBrand:item.steelBrand ||'品牌',//品牌
        steelSize:item.steelSize ||'规格',//规格
        brandName:item.brandName ||'钢材类型',//钢材类型
        brandModel:item.brandModel ||'型号',//型号
        brandLength:item.brandLength ||'长度',//长度
        steelNum:item.steelNum ||'',
        bundleNum:item.bundleNum ||''
      };

      this.picMessage.steelBrand=item.steelBrand;
      this.picMessage.brandName=item.brandName;
      this.picMessage.steelSize=item.steelSize;
      this.picMessage.brandModel=item.brandModel;
      this.picMessage.brandLength=item.brandLength;
      this.picMessage.steelNum=item.steelNum;

      this.picMessageId.steelBrandId=item.steelBrandId;
      this.picMessageId.brandNameId=item.brandNameId;
      this.picMessageId.steelSizeId=item.steelSizeId;
      this.picMessageId.brandModelId=item.brandModelId;
      this.picMessageId.brandLengthId=item.brandLengthId;
      this.picMessageId.steelNumId=item.steelNumId;
      this.picMessageId.bundleNumId=item.bundleNumId;
      this.closePopup_editor()
      this.showPopup($event);
    },
    returnEditor(){
      //返回编辑界面
      const index=this.selectPicIndex;
      const item=this.logoImg[index];
      let that=this;
      wx.showLoading({title:'获取地理位置中',mask:true})
      wx.getLocation({
            type: 'wgs84',
            success:function (res1) {
              var lat=res1.latitude;
              var lng=res1.longitude;
            const imgItem={point_item_img_id:item.point_item_img_id,img_url:item.img_url,id:item.id,img_id_paint:item.img_id_paint,img_url_paint:item.img_url_paint,...that.picMessage,steelNum:item.steelNum,bundleNum:item.bundleNum,...that.picMessageId};
            imgItem.lat=lat;
            imgItem.lng=lng;
            imgItem.is_result=1;
            that.imgItem=imgItem;
            that.logoImg.splice(index,1,imgItem);
            
            that.uploadSteel();//识别图片
            that.closePopup();
            // that.showEditor(item,index);
            },
            fail:function(){
              that.$currency.showToast('获取地理位置失败,打开手机的GPS')
            },
            complete:function(){
              if(!that.btnFlag){
                wx.hideLoading()
              }
            }
      })
      
    },
    reTakePhoto(){
      //重新拍照
      const index=this.selectPicIndex;
      const item=this.logoImg[index];
      if(item.is_appeal==2){
        this.$currency.showToast('该图片已申述，不能进行重拍')
        return
      }
      this.uploadImg(false)
    },

    getPicDesc($event,type){
      //填写弹出框内容
      let data=null
      const name=$event.mp.detail.name;
      const id=$event.mp.detail.id;
      switch(type){
        case 'brand':
          data='steelBrand';
          break;
        case 'brandName' :
          data='brandName';
          break;
        case 'size' :
          data='steelSize';
          break;
        case 'model':
          data='brandModel';
          break;
        case 'length':
          data='brandLength';
          break;
      }
      this.picMessage[data]=name;
      const idname=`${data}Id`
      this.picMessageId[idname]=id;
    },
    initArrayItem(){
      //初始化可选项的默认选项

      //类型
      this.picMessage.brandName=this.brandNameArr[0].name;
      this.picMessageId.brandNameId=this.brandNameArr[0].id;
      this.nowText.brandName=this.brandNameArr[0].name;

      //型号
      this.picMessage.brandModel=this.brandModelArr[0].name;
      this.picMessageId.brandModelId=this.brandModelArr[0].id;
      this.nowText.brandModel=this.brandModelArr[0].name;

      //长度
      this.picMessage.brandLength=this.brandLengthArr[0].name;
      this.picMessageId.brandLengthId=this.brandLengthArr[0].id;
      this.nowText.brandLength=this.brandLengthArr[0].name;

    },
    async getRule(){
      //获取钢材的规格
      const res=await this.$request.getData('/ucenter/getPointItemFormat',{
      });

      if(res.data.level=='success'){
        this.brandArr=res.data.brand;
        this.brandNameArr=res.data.brand_name;
        this.steelSizeArr=res.data.format;
        this.brandModelArr=res.data.material;
        this.brandLengthArr=res.data.length;
        
        this.initArrayItem()
      }
    },
    async getChanNum(){
      //获取对应出厂支数；
      if(this.picMessageId.steelBrandId=='' ||
          this.picMessageId.steelSizeId==''){
            return
          }
      
      var bundle_num='';//捆数
      if(this.selectPicIndex!==''){
        let index=this.selectPicIndex;
          let item=this.logoImg[index];
          bundle_num=item.bundleNum||1;
      }else{
        bundle_num=this.nowText.bundleNum||1;
      }
          
      const res=await this.$request.getData('/ucenter/getFactoryCount',{
        brand_id:this.picMessageId.steelBrandId,
        format_id:this.picMessageId.steelSizeId,
        bundle_num:bundle_num
      })
      if(res.data.level=='success'){
        const data=res.data.data;
        if(this.selectPicIndex===''){
          this.nowText.steelNum=data
        }else{
          //编辑已有的照片时更新出厂支数
          let index=this.selectPicIndex;
          let item=this.logoImg[index];
          item.steelNum=data;

          this.$set(this.logoImg,index,item)
        }
        
      }
    },

    adjustPic(url,id,index,width,height){
      //重设涂鸦的图片
      let that=this
      wx.showLoading({title:'获取地理位置中',mask:true})
      wx.getLocation({
            type: 'wgs84',
            success:function (res1) {
              var lat=res1.latitude;
              var lng=res1.longitude;

              console.log(url,id,index,width,height,'涂鸦的信息')
              // let item=that.logoImg[index];
              let item=that.logoImg[0];
              item.img_url_paint=url;
              item.img_id_paint=id;//涂鸦后的id
              item.width=width||'';//涂鸦的宽高
              item.height=height||'';
              item.is_result=0;
              item.lat=lat;
              item.lng=lng;
              that.imgItem='';
              that.imgItem=item
              // that.$set(that.logoImg,index,item);
              that.$set(that.logoImg,0,item);
              
              that.uploadSteel();
            },
            fail:function(){
              // that.$currency.showToast('上传图片前，需获取当前位置')
              that.btnFlag=true
              that.$currency.showToast('获取地理位置失败,打开手机的GPS')
            },
            complete:function(){
              if(!that.btnFlag){
                wx.hideLoading()
              }
              
            }
      })
      
    },
    

    async commit($event,type){
      const userToken=wx.getStorageSync('userToken')
     const res=await this.$request.postData('/ucenter/insertPointItem',{
        user_token:userToken,
        project_id:this.project_id,
        plate_num:this.plate_num,
        // original_pieces_num:this.original_pieces_num,
        img_id:this.img_id,
        id:this.item_id,
        type:type,
        form_id:$event.target.formId,


      })
      if(res.data.level=='success'){
        this.$currency.showToast(res.data.message)
        setTimeout(()=>{
          if(type=='submit_directly'){
            this.$currency.switchTab('/pages/home/main')
          }else{
            wx.redirectTo({
              url:'/pages/draftsList/main'
            })
          }
          
        },1500)
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
    async getPointItemDetail(){
      //获取顶部信息
      const userToken=wx.getStorageSync('userToken')
      let params={
        user_token:userToken,
        point_item_id:this.item_id,
      }
      const res=await this.$request.postData('/ucenter/getPointItemDetail',params,{show:false})
      if(res.data.level=='success'){
        this.projectInfo=res.data.data;
      }
    },
    async getPointItemByItemId(){
      //获取点条内部获取图片识别结果（轮询）/ucenter/getPointItemByItemId
      const userToken=wx.getStorageSync('userToken')
      const res=await this.$request.getData('/ucenter/getPointItemByItemId',{
        user_token:userToken,
        point_item_id:this.item_id,
      })
      if(res.data.level=='success'){
        wx.stopPullDownRefresh()
        this.logoImg=[];
        this.point_imgs = res.data.data.point_imgs;
        const imgs = this.point_imgs;

        imgs.forEach(item=>{
          let obj={
            point_item_img_id:item.id,
            steelBrand:item.brand,
            brandName:item.brand_name,
            steelSize:item.format,
            brandModel:item.material,
            brandLength:item.length,
            steelNum:item.factory_count,
            bundleNum:item.bundle_num,

            img_thumb_url:item.graffiti_before_thumb_url,//涂鸦前的压缩图
            img_url:item.graffiti_before_img_url,//涂鸦前图片的id
            id: item.graffiti_before_img_id, 
            img_id_paint:item.img_id,//涂鸦后的照片id
            img_url_paint:item.img_url,
            img_thumb_paint:item.thumb_url,//涂鸦后的压缩图

            steelBrandId:item.brand_id,
            brandNameId:item.brand_name_id,
            steelSizeId:item.format_id,
            brandModelId:item.material_id,
            brandLengthId:item.length_id,
            steelNumId:item.factory_count_id,

            lat:item.lat,
            lng:item.lng,
            is_appeal:item.is_appeal
            }
            if(item.is_completed==1){
              //识别完成
              obj.is_result=1;
              obj.result_factory_count=item.factory_count;
              obj.result_abnormal=item.result_abnormal;
              obj.result_check_num=item.user_check_num;
            }
          this.logoImg.push(obj)
        })
      }
      
    },
    async startGetnews(){
        //轮询获取新消息s
        const _this=this;
        if(this.startGetnewsTimer){
          //清除轮询
          clearTimeout(this.startGetnewsTimer)
        }
        async function timerFn () {
          const userToken=wx.getStorageSync('userToken')

          const data=await _this.$request.getData('/ucenter/getPointItemStatus',{
            user_token:userToken,
            point_item_id:_this.item_id
          },{show:false})
          if(data.data.data==1 &&_this.refreshFlag==true){
            //*@params this.refreshFlag 当有图片在上传的时候不能更新当前数据,避免新上传的图片未上传完信息就给覆盖*
            _this.getPointItemByItemId();
            _this.getPointItemDetail()
          }
        _this.startGetnewsTimer=  setTimeout(timerFn, 1500)
        }
        timerFn()
      },
    orderSign(){
        //刷新
        this.getPointItemByItemId()
        },
    toHome(){
      this.$currency.switchTab('/pages/home/main')
    },
    async finishRecord(){
      const _this=this;
      const select=await this.$currency.showModal(`确认完成${this.plate_num}的收货吗?`,'')
      if(select){
        const userToken=wx.getStorageSync('userToken')

        const data=await _this.$request.postData('/project/setCompletePoint',{
          user_token:userToken,
          point_item_id:_this.item_id
        },false)
        if(data.data.level == "error"){
          _this.$currency.showToast(data.data.message)
        }else{
          _this.$currency.showToast(data.data.message)
          setTimeout(()=>{
            wx.switchTab({
              url:'/pages/home/main'
            })
          },1500)
        }
      }
    },

    
    initData(){
      this.project_id='';
      this.project_name='';
      this.plate_num='';//车牌号
      this.logoImg=[];
      this.initFlag=false;
      setTimeout(()=>{
        this.initFlag=true
      })
      this.item_id='';
      this.imgItem='';
      this.refreshFlag=true;
      this.tabActivieItem=1;
    },
    async uploadSteel($event){
      //立即识别
      this.refreshFlag=false;
      const userToken=wx.getStorageSync('userToken')
      console.log('我要进行识别了')
      const res=await this.$request.postData('/ucenter/insertPointItemImgByOne',{
        user_token:userToken,
        img_id:this.img_id,
        point_item_id:this.item_id,
        form_id:this.form_id,
      })
      if(res.data.level=='success'){
        this.item_id=this.item_id?this.item_id:res.data.data.id

      }
      this.refreshFlag=true
    },
    getLastPage(){
      let arr=getCurrentPages();
      let index=arr.length-2>=0?arr.length-2:0;
      this.lastPageRoute=arr[index].route;//上一页的页面
    },
    clearStartGetnewsTimer(){
      if(this.startGetnewsTimer){
        //清除轮询
        clearTimeout(this.startGetnewsTimer)
      }
    },

  },
  
  onUnload(){
    this.clearStartGetnewsTimer()
    
  },
 onLoad(options){
   
  //  this.getLastPage();
   if(!options.imgUrl&& options.type!='back'){
     
      this.initData();
      this.clearStartGetnewsTimer();
      this.getRule();//获取钢材规格
      if(options.itemId){
        this.item_id = options.itemId
        this.editorFlag=true
      }else{
        this.editorFlag=false
      }
      this.getPointItemByItemId()
   }
   
    
   
   if(options.projectId){
     this.project_id=options.projectId;
   }
    if(options.name){
      //项目名
      this.project_name=options.name;
    }
    if(options.plateNum){
      //车牌号
      this.plate_num=options.plateNum
    }
    if(options.type=='back'){
      //无涂鸦，立刻识别
      this.uploadSteel();
    }
    if(options.imgUrl){
      //涂鸦的webview传回涂擦图参数，小程序传后台队列合成
      console.log(options,7777)
      /**
       * @param imgId 涂鸦的图片id
       * @param imgIndex 项目传来的index(无用，改版后只用于区分一拍即点和项目)
       * @param imgUrl 底图的src
       * @param witdh 合成图的宽高（安卓真机，部分高清屏，超出5000px，原始宽高实质只获取了2500px）
       * @param height
       */
      
      this.refreshFlag=false;//避免上传信息前就刷新数据
      this.adjustPic(
        options.imgUrl,
        options.imgId,
        options.imgIndex,
        options.imgWidth,
        options.imgHeight,
        )
    }

    this.startGetnews();
    this.getPointItemDetail()
 },
 onPullDownRefresh() {
  this.updateTab();
  this.getPointItemDetail()
 }
}
</script>
<style lang="scss" scoped>
$base-color:#f28b00;
//头部
.header{
  .gou{
    width: 40px;
    height: 40px;
  }
    display: flex;
    padding-top:10px;
    padding:0 20px;
    width: 100%;
    box-sizing: border-box;
    height: 160px;
    position: fixed;
    // background: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/steel/icon/countBg.jpg');
    // background-size:100% 100%;
    // color:#fff; 
    z-index: 99;
    .header-desc{
      height: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .item_name{
        font-weight: 600;
        font-size: 18px;

      }
      .item_content{
        display: flex;
        align-items: center;
        width: 90vw;
        span:nth-of-type(2){
          margin-left: 20px;
        }
        .form{
          flex:1;
          display: flex;
          flex-direction: row-reverse;
          button{
            height: 40px;
            line-height: 40px;
          }
        }
      }
      .item_content{
        font-size: 14px;
      }
      .item_date{
        font-size: 13px;
      }
    }
    button{
      height: 23px;
      line-height: 23px;
      font-size: 16px;
      padding:0 10px;
      text-align: center;
      border-radius: 10px;
      background: $base-color;
      color:#fff;
    }
    button::after{
      border:none;
      
    }
}

.tip{ 
  position: fixed;
  top:0;
  z-index:99;
  width: 100%;
  button{
    color:#ff3366;
  }
}
  .newProject{
    
    top:120px;
    padding:0 10px;
    font-size: 18px;
    position: relative;
    z-index: 100;
    background:#fff;
    overflow: hidden;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top:2px solid $base-color;
  }
  .item{
    display: flex;
    align-items: center;
    padding:10px 0;
    border-bottom: 1px solid #eee;
    .item_name{
      width: 100px;
      
    }
    & input{
      flex:1;
      margin-left:20px;
    }
  }
  .uploadCarImg{
    padding:10px 0;
  }
  .statistics_wrapper,.record_wrapper{
    height: calc(100vh - 250px);
    // overflow-y: scroll;
  }

  .logoList{
    width: 100%;
    transform: translateZ(0);
    height: calc(100vh - 250px);
    // height: calc(100vh - 150px);
    // overflow-y: scroll;
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    // padding-bottom:60px;
    .logoImg_item_wrapper{
      margin:10px 0;
      border-radius: 10px;
      .btn_list{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .editorBtn,.falseBtn{
          width: 30px;
          height: 30px;
          margin:10px 0;
        }
      }
      
    }
    .logoImg_item_wrapper:last-of-type{
      padding-bottom: 60px;
    }
    .logoImg_item{
      display: flex;
      width:100%;
    }
    .img_wrapper{
      position: relative;
      height: 120px;
      line-height: 120px;
    }
    .img_layer{
       position:absolute;
       top:0;
      z-index:9;
      color:#fff;
      text-align: center;
      width: 150px;
      height: 100%;
      background: rgba($color: #000000, $alpha: 0.7);
      border-radius: 10px;
    }
    .logoImg_desc{
      font-size: 14px;
      padding-left:10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: space-around;
      .logoImg_desc_item{
        width:100%;
        .label{
          padding:5px 10px;
          margin-right: 10px;
          height: 20px;
          line-height: 20px;
          display: inline-block;
          background-color: #ffffff;
          border-radius: 14px;
          border: solid 1px #bfbfbf;
        }
        .label-appeal{
          color:green;
          font-weight: 600
        }
      }
      .logoImg_desc_item_count{
        color:green;
        font-size: 15px;
	      font-weight: bold;
      }
    }
    .resetBtn{
      white-space: nowrap;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      text-align: center;
      border-radius: 10px;
      padding:0 5px;
      color:#fff;
      background-color: #409eff;

      
    }
    .splitImg{
      width: 150px;
      height: 120px;
      border-radius: 10px;
      object-fit: contain;
    }
  }
  .selectType_content{
    width:250px;
    height:20px;
    display:flex;
    justify-content: space-between;
  }
  .upLoadImg{
    display: flex;
    align-items:center;
    margin-top:10px;
    span{
        color:red;
        font-size: 14px;
        white-space: nowrap;
      }
  }

  .btn{
    position: fixed;
    bottom: 0px;
    width:100%;
    padding:10px 0;
    background: #fff;
    display: flex; 
    z-index:100;
    justify-content: center;
  }
  .btn_commit{
    background: #fff;
    text-align: center;
    display: flex; 
    align-items: center;
    img{
      width:40px;
      height: 40px;
    }
  }
  .btn_commit::after{
    border:none;
  }
  .btn_save{
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border-radius: 20rpx;
    background-color: #409eff !important;

  }


  //弹出层样式
  .popup_content{
    width: calc(100vw - 120px);
    // height: calc(100vh - 200px);
    height: auto;
    border-radius: 20px;
    background: transparent!important;
    // border: 1px solid #eee;
    
  }
  //图片输入详情
  .borderB{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .upLoad_pic{
    text-align: center;
    width: 120px;
    padding:10px 10px;
    margin:10px auto;
    span{
      border:2px solid #eee;
      display: inline-block;
      padding:5px 20px;
      border-radius: 10px;
      color:#fff;
      background:$base-color;
    }
    img{
      width: 40px;
      height: 40px;
    }
  }
  .PicDesc_item{
    background: #fff;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    .PicDesc_item_label{
      padding: 0 40rpx 0 12rpx;
      display: inline-block;
      white-space: nowrap;
      font-size: 16px;
      color:#000;
    }
  }

  //图片编辑详情
  .img_editor_wrapper{
    width: calc(100vw - 60px);
    padding:10px;
    font-size: 14px;
    .img_editor_img{
      width: 100%;
      height: 150px;
      margin-bottom: 10px;
      
      img{
        object-fit: contain;
        width: 100%;
        height: 100%;
      }
    }
    .img_editor_desc{
      &>div{
        padding:5px 0;

      }
    }
    .img_editor_btnList{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top:20px;
      &>div{
        color:#fff;
        padding:7.5px 30px;
        border-radius:25px;
      }
      .del{
        background: rgb(197, 191, 191);
      }
      .editor{
        background: gray;
      }
      .reTakePhoto{
        background: rgb(90, 91, 187);
      }
    }
    
  }
  .myCanvas{
      top:-100000000000000000px;
      left:-10000000000000000px;
      position: absolute;
  }
  .home{
    position: fixed;
    bottom: 90px;
    right: 20px;
    img{
      width: 30px;
      height: 30px;
    }
  }

  //授权按钮弹出框
  .btnpopup{
    width: 300px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    &>button{
      width: 120px;
    height: 40px;
    line-height: 40px;
    color:#fff;
    text-align: center;
    border-radius: 10px;
    background: rgb(90, 91, 187);
    }
  }
</style>
<style>

.itemList .van-popup{
  top:52%;
  z-index:5200;
}
.van-hairline--top-bottom:after{
  border:none !important;
}
/* .newProject .van-tabs__scroll--card{
   border:none !important;
  } */


.keyboard{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
}
.projectTab{
  font-size: 34rpx !important;
}
.projectTabActive{
  font-weight: 600 !important;
}
.slot-right{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  color:#fff;
  background: red;
}
.slot-right-btn{
    width:100%;
    text-align: center;
    height: 100%;
    line-height: 100px
  }
  ::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    color: transparent;
    display: none;
    }
    
</style>

